<template>
	<view class="outer">
		<!-- #ifndef H5 -->
		<Nav :isShow="false"></Nav>
		<!-- #endif -->
		<view class="top">
			<view class="top_top">
				<image
					style="padding: 10px;"
					:src="indexList.logoUrl"
					mode=""
				></image>
				<view @click="toSearch">
					<u-search
						class="search"
						placeholder="搜索商品"
						:showAction="false"
					></u-search>
				</view>
			</view>
			<view @click="toYongjin" class="banner">
				<view class="banner_pic">
					<u-swiper
						:list="bannerList"
						indicator
						indicatorMode="line"
						circular
					></u-swiper>
				</view>
			</view>
		</view>
		<view class="tips" @click="tipsClick">
			<image
				class="img"
				src="@/static/images/xinjian.png"
				mode=""
			></image>
			<text style="font-size: 12px; color: #d6cccc">|</text>
			<view class="u-demo-block__content">
				<u-notice-bar
					style="width: 55vw"
					:text="tips"
					direction="column"
					mode="link"
					:icon="null"
					bgColor="#ffffff"
					fontSize="12"
					color="black"
				></u-notice-bar>
			</view>
		</view>
		<view class="menus">
			<view
				v-for="(item, index) in menusList"
				:key="index"
				class="menus_content"
				@click="toPages(urlList[index])"
			>
				<image :src="item.pic" mode=""></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="discount">
			<view class="left">
				<text
					style="color: #ffebd2; font-size: 16px; font-weight: bolder"
				>
					领取优惠券
				</text>
				<text style="color: #ffebd2; font-size: 12px; padding: 2px">
					福利大礼包,省了又省
				</text>
				<text
					@click="toYouhui"
					style="color: #ffdaaf; font-size: 12px; padding: 5px;cursor: pointer;"
				>
					查看全部&gt;
				</text>
			</view>
			<view
				v-for="(item, index) in discountList"
				:key="index"
				:class="{content: !item.isUse, content_used: item.isUse}"
			>
				<text
					style="color: #e1ae59; font-size: 12px"
					:class="{name: item.isUse}"
				>
					{{ item.name }}
				</text>
				<text
					style="color: #e93323; font-size: 18px; font-weight: bolder"
					:class="{money: item.isUse}"
				>
					{{ Math.trunc(item.money) }}
					<text style="font-size: 12px" :class="{money: item.isUse}">
						元
					</text>
				</text>
				<text
					style="
            background-color: #ffe5c7;
            padding: 2px 14px;
            border-radius: 15px;
            font-size: 12px;
            color: #e93323;
			cursor: pointer;
          "
					:class="{ling: item.isUse}"
				>
					<text @click="receive(item.id)" v-if="!item.isUse">
						领取
					</text>
					<text v-if="item.isUse">已领取</text>
				</text>
				<text style="color: #ffdaaf; font-size: 12px; padding: 4px 8px">
					满{{ Math.trunc(item.minPrice) }}元可用
				</text>
			</view>
		</view>
		<view class="tabs">
			<view
				v-for="(item, index) in tabList"
				:key="index"
				class="tabs_content"
				@click="click(item)"
			>
				<text
					:class="{
						tabs_name: true,
						activeName: item.type == currentIndex
					}"
				>
					{{ item.name }}
				</text>
				<text
					:class="{
						tabs_info: true,
						activeInfo: item.type == currentIndex
					}"
				>
					{{ item.info }}
				</text>
			</view>
		</view>
		<view class="goods">
			<view
				v-for="(item, index) in goodsList"
				:key="index"
				class="goods_content"
				@click="toDetails(item.id)"
			>
				<image :src="item.image" mode=""></image>
				<text class="title">{{ item.storeName }}</text>
				<text
					style="color: #aaaaaa; font-size: 12px; text-decoration: line-through"
				>
					￥{{ item.otPrice }}
				</text>
				<text
					style="color: #e93323; font-size: 18px; font-weight: bolder"
				>
					￥{{ item.price }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import {
	indexData,
	indexDiscount,
	indexGoods,
	receiveCoupon
} from "../../network/index.js";
import Nav from "@/components/top_nav.vue";
export default {
	data() {
		return {
			bannerList: [],
			tips: [],
			menusList: [],
			tabList: [],
			currentIndex: 4,
			indexList: {},
			discountList: [],
			goodsList: [],
			urlList: [
				"/pages/classify/classify",
				"/subpackages/guanggao/guanggao",
				"/pages/users/user_vip/signIn",
				"/subpackages/shoucang/shoucang",
				"/subpackages/pintuan/pintuan",
				"/subpackages/miaosha/miaosha",
				"/subpackages/kanjia/kanjia",
				"/pages/users/users_address_list/index",
				"/pages/order/index",
				"/pages/points/youhui"
			]
		};
	},
	onLoad() {},
	components: {
		Nav
	},
	methods: {
		toDetails(id) {
			uni.navigateTo({
				url: "../../subpackages/classify/ProductDetails?id=" + id
			});
		},
		toYouhui() {
			const token = uni.getStorageSync("_token");
			if (token) {
				uni.navigateTo({
					url: "/pages/points/youhui"
				});
			} else {
				uni.navigateTo({
					url: "/pages/login/login"
				});
			}
		},
		toYongjin() {
			const token = uni.getStorageSync("_token");
			if (token) {
				uni.navigateTo({
					url: "/pages/points/point"
				});
			} else {
				uni.navigateTo({
					url: "/pages/login/login"
				});
			}
		},
		async receive(id) {
			try {
				const res = receiveCoupon(id);
				console.log(res);
				location.reload();
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		toPages(url) {
			console.log(url);
			if (url === "/pages/classify/classify") {
				uni.switchTab({
					url
				});
			} else {
				const token = uni.getStorageSync("_token");
				if (token) {
					uni.navigateTo({
						url
					});
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
			}
		},
		toSearch() {
			uni.navigateTo({
				url: "/pages/search/search"
			});
		},
		tipsClick() {
			uni.navigateTo({
				url: "../../subpackages/guanggao/guanggao"
			});
		},
		async getIndexData() {
			try {
				const res = await indexData();
				this.indexList = res.data;
				for (let item of res.data.banner) {
					this.bannerList.push(item.pic);
				}
				for (let item of res.data.roll) {
					this.tips.push(item.info);
				}
				this.menusList = res.data.menus;
				this.tabList = res.data.explosiveMoney;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		async getIndexDiscount() {
			try {
				const res = await indexDiscount();
				this.discountList = res.data;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		click(o) {
			this.currentIndex = +o.type;
			this.getIndexGoods();
		},
		async getIndexGoods() {
			try {
				const res = await indexGoods(this.currentIndex);
				this.goodsList = res.data.list;
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		}
	},
	created() {
		this.getIndexData();
		this.getIndexDiscount();
		this.getIndexGoods();
	}
};
</script>

<style lang="scss" scoped>
.content_used {
	background-image: url("");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 90%;
	background-color: #ff5112;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5px;
}
.name {
	color: #b2bece !important;
	font-size: 12px;
}
.money {
	color: #b2bece !important;
	font-size: 18px;
	font-weight: bolder;
}
.ling {
	background-color: #f5f5f5 !important;
	padding: 2px 14px;
	border-radius: 15px;
	font-size: 12px;
	color: #b8b2c1 !important;
}
.outer {
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	align-items: center;
	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #e93323;
		.top_top {
			width: 80vw;
			display: flex;
			justify-content: center;
			align-items: center;
			.search {
				cursor: pointer;
				padding: 10px;
			}
			image {
				width: 65px;
				height: 22px;
			}
		}
		.banner {
			width: 100vw;
			padding: 5px 0;
			background: linear-gradient(
				180deg,
				#e93323 0%,
				#f5f5f5 100%,
				#751a12 100%
			);
			display: flex;
			justify-content: center;
			.banner_pic {
				width: 80vw;
				height: 40vh;
				border-radius: 10px;
				height: 100%;
			}
		}
	}
	.tips {
		width: 80vw;
		margin: 10px;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 8px;
		cursor: pointer;
		.u-demo-block__content {
			width: 55vw;
		}
		.img {
			width: 60px;
			height: 18px;
		}
	}
	.menus {
		width: 80vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8px;
		.menus_content {
			width: 12vw;
			padding: 2vh 2vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			cursor: pointer;
			image {
				width: 12vw;
				height: 12vw;
			}
			text {
				width: 12vw;
				padding-top: 5px;
				font-size: 10px;
			}
		}
	}
	.discount {
		margin: 15px 0;
		width: 80vw;
		height: 15vh;
		display: flex;
		background-image: url("@/static/images/yhjsy.7c3863a9.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		.left {
			padding: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.content {
			background-image: url("");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 90%;
			background-color: #ff5112;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 5px;
		}
	}
	.tabs {
		width: 80vw;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		background-color: #f5f5f5;
		z-index: 9;
		top: 0;
		.tabs_content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		.tabs_info {
			text-align: center;
			width: 100%;
			font-size: 12px;
			color: #999999;
		}
	}
	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		.goods_content {
			margin: 10px;
			width: 35vw;
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			border-radius: 10px;
			cursor: pointer;
			image {
				width: 35vw;
				height: 171px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}
			.title {
				width: 35vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
.activeName {
	color: #e93323;
}
.activeInfo {
	color: #fff !important;
	background: linear-gradient(90deg, #f62c2c 0%, #f96e29 100%);
	border-radius: 8px;
}
</style>
